@charset "utf-8";


@import "reset";
$font-size:40;

@function r($px){
    @return $px/$font-size*1rem;
}

html,body{
    
    width: 100%;
    height: 100%;
   
}

.web{
    width: 100%;
    height: 100%;
    position: relative;
    background: url('../img/wedding-bg.jpg')no-repeat;
    background-size:100% ;
}

//定制十桌
.pop-up-windows2{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
    display: none;
    .window-tc{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        .closeBtn2{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tc-msg{
           font-size: r(44);
           color: #bf0c21;
           text-align: center;
           margin-top: r(80);
        }
      
    }
    
}
//最少定制三桌

.pop-up-windows3{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
    display: none;
    .window-tc{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        .closeBtn3{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tc-msg{
           font-size: r(44);
           color: #bf0c21;
           text-align: center;
           margin-top: r(80);
        }
      
    }
    
}


//
.pop-up-windows{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
    display: none;
    #sharemsg{
        color: white;
        font-size: r(40);
        position: absolute;
        right: r(53);
        top: r(100);
    }

    .yindao{
        width: r(86);
        height: r(45);
        position: absolute;
        right: r(53);
        top: r(60);
        transition: all 2s linear 0s ; 
        animation: yindao 2s linear 0s infinite alternate forwards ;
        @keyframes yindao{
            0%{transform: translate(0);}
            20%{transform: translateX(r(40)) translateY(r(-40));}
            60%{transform: translateX(r(40)) translateY(r(-40));}   
            100%{transform: translateX(r(40)) translateY(r(-40));}  
        }
         @-webkit-keyframes yindao{
            0%{-webkit-transform: translate(0);}
            20%{-webkit-transform: translateX(r(40)) translateY(r(-40));}
            60%{-webkit-transform: translateX(r(40)) translateY(r(-40));}
            100%{-webkit-transform: translateX(r(40)) translateY(r(-40));}
            
        }
        img{
            width: 100%;
            height: 100%;
        }
        
    }

    .window-tc{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        .closeBtn{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        #sharemsg1{
            width: 70%;
            margin: 0 auto;
            margin-top: r(76);
            font-size: r(40);
            color: #bf0c21;
            text-align: center;    
        }
        #sharemsg2{
             width: 100%;
            margin: 0 auto;
            font-size: r(40);
            color: #bf0c21;
            text-align: center;   
        }
        
}
}


header{
    width: 100%;
    height: r(80);
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: r(80);
    .title{
        font-size: r(35);
        color: #e7c598;
    }
}

section{
    width: 100%;
    position: absolute;
    top: r(80);
    bottom: r(110);
    overflow-y: scroll;
    
    #content{
        width: 90%;
        margin: 0 auto;
    }
    
     .jiuxishu{
        width: r(190);
        height: r(200);
        display: inline-block;
        position: relative;
        margin-left:r(62) ;
         .bigtable{
            width: r(89);
            height: r(87);
            background: #e7c598;
            color: #bf0c21;
            text-align: center;
            position: absolute;
            left:50%;
            margin-left: r(-45);
            top: r(56);
            line-height: r(87);
            font-size: r(23);
            border-radius: 50%;
            box-shadow: r(5) r(5) rgba(0,0,0,.7);
            #shu{
               display: inline-block;
               width: r(3);
               height: r(50);
               background: #bf0c21;
                position: absolute;
                left:50%;
                margin-left: r(-1.5);
                top: r(25);
            }
            #heng{
                 display: inline-block;
                width: r(50);
                height: r(3);
                background: #bf0c21;
            }
        }
        .zhuowei{
            width: r(45);
            height: r(45);
            border-radius: 50%;
            font-size: r(14);
            text-align: center;
            line-height: r(45);
            box-shadow: r(5) r(3) rgba(0,0,0,.5);
            background:#e7c598 ; 
            color: #bf0c21;   
        }
        .a1{
            position: absolute;
            left: r(72);
            top: 0;
        }
        .a2{
            position: absolute;
            right: 0;
            top: r(48);
        }
        .a3{
            position: absolute;
            right: 0;
            bottom: r(49);
        }
        .a4{
            position: absolute;
            right: r(70);
            bottom: 0;
        }
        .a5{
            position: absolute;
            left: 0;
           bottom: r(49);
        }
        .a6{
             position: absolute;
            left: 0;
            top: r(48);
        }
        }
    
    
    .zhubing{
        width: r(220);
        height: r(240);
       position: relative;
        margin: 0 auto;
        .bigtable{
            width: r(122);
            height: r(125);
            background: #e7c598;
            color: #bf0c21;
            text-align: center;
            position: absolute;
            left:r(55) ;
            top: r(56);
            line-height: r(125);
            font-size: r(23);
            border-radius: 50%;
            box-shadow: r(2) r(2) rgba(0,0,0,.7);
        }
        .zhuowei{
            width: r(45);
            height: r(45);
            border-radius: 50%;
            font-size: r(14);
            text-align: center;
            line-height: r(45);
            box-shadow: r(5) r(5) rgba(0,0,0,.7);
            background:#e7c598 ; 
            color: #bf0c21;   
        }
        .a1{
            position: absolute;
            left: r(85);
            top: 0;
        }
        .a2{
            position: absolute;
            right: 0;
            top: r(48);
        }
        .a3{
            position: absolute;
            right: 0;
            bottom: r(49);
        }
        .a4{
            position: absolute;
            right: r(85);
            bottom: 0;
        }
        .a5{
            position: absolute;
            left: 0;
           bottom: r(49);
        }
        .a6{
             position: absolute;
            left: 0;
            top: r(48);
        }
    }
    
}

footer{
    width: 100%;
    height: r(110);
    position: absolute;
    left: 0;
    bottom: 0;
    #createBtn{
        width: r(318);
        height: r(45);
        position: absolute;
        left: r(150);
        bottom: r(40);
        
        img{
            width: 100%;
            height: 100%;
        }
    }
}
